<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen flex items-center justify-center bg-white">
        <div
            class="container mx-auto flex flex-col md:flex-row w-full max-w-6xl shadow-lg rounded-lg overflow-hidden animate-fadeIn">
            <!-- 左侧标题区域 -->
            <div class="w-full md:w-1/2 flex flex-col justify-center items-center p-12 relative overflow-hidden">
                <div class="relative z-10">
                    <h1
                        class="text-4xl md:text-5xl font-bold text-gray-900 tracking-wide mb-6 text-center md:text-left">
                        AI测试集成平台
                    </h1>
                    <p class="text-lg text-gray-700 max-w-md">
                        智能化测试解决方案，让您的测试流程更加简单高效
                    </p>
                </div>
                <!-- 背景图片 -->
                <div class="absolute inset-0 z-0 bg-gradient-animation">
                    <div class="floating-particles"></div>
                    <img :src="backgroundImageUrl" alt="AI测试平台背景"
                        class="w-full h-full object-cover object-center opacity-10" />
                </div>
            </div>
            <!-- 右侧登录表单 -->
            <div class="w-full md:w-1/2 bg-white p-12 flex flex-col justify-center border-l border-gray-200">
                <h2 class="text-2xl font-semibold text-gray-800 mb-8">欢迎登录</h2>
                <form @submit.prevent="handleLogin" class="space-y-6">
                    <div class="space-y-2">
                        <label for="username" class="text-sm font-medium text-gray-700">用户名</label>
                        <a-input id="username" v-model:value="username" placeholder="请输入用户名"
                            :status="usernameError ? 'error' : ''"
                            class="w-full rounded-md border-gray-300 transition-all duration-300 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                            <template #prefix>
                                <user-outlined class="text-gray-400" />
                            </template>
                        </a-input>
                        <div v-if="usernameError" class="text-red-500 text-xs mt-1">{{ usernameError }}</div>
                    </div>
                    <div class="space-y-2">
                        <label for="password" class="text-sm font-medium text-gray-700">密码</label>
                        <a-input-password id="password" v-model:value="password" placeholder="请输入密码"
                            :status="passwordError ? 'error' : ''"
                            class="w-full rounded-md border-gray-300 transition-all duration-300 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                            <template #prefix>
                                <lock-outlined class="text-gray-400" />
                            </template>
                        </a-input-password>
                        <div v-if="passwordError" class="text-red-500 text-xs mt-1">{{ passwordError }}</div>
                    </div>
                    <div class="flex items-center justify-between">
                        <a-checkbox v-model:checked="rememberMe" class="text-sm text-gray-700">
                            记住我
                        </a-checkbox>
                        
                    </div>
                    <button type="submit"
                        class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 !rounded-button whitespace-nowrap cursor-pointer"
                        :class="{ 'opacity-75 cursor-not-allowed': isLoading }" :disabled="isLoading">
                        <span v-if="isLoading" class="flex items-center justify-center">
                            <loading-outlined class="animate-spin mr-2" />
                            登录中...
                        </span>
                        <span v-else @click="handleLogin" @keyup.enter="handleLogin">登录</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { UserOutlined, LockOutlined, LoadingOutlined } from '@ant-design/icons-vue';
// 状态变量
const username = ref('');
const password = ref('');
const rememberMe = ref(false);
const isLoading = ref(false);
const usernameError = ref('');
const passwordError = ref('');
// 背景图片
const backgroundImageUrl = 'https://readdy.ai/api/search-image?query=Abstract%20digital%20technology%20background%20with%20blue%20circuit%20patterns%20and%20glowing%20nodes%20representing%20artificial%20intelligence%20and%20machine%20learning%2C%20minimal%20clean%20design%20with%20subtle%20tech%20elements%20perfect%20for%20AI%20testing%20platform&width=800&height=1000&seq=12345&orientation=portrait';
// 登录处理
import router from '../router/index';
import { login } from '../utils/api';
// 状态管理
const loading = ref(false);
// 添加页面载入动画
onMounted(() => {
    document.body.style.opacity = '0';
    setTimeout(() => {
        document.body.style.opacity = '1';
        document.body.style.transition = 'opacity 0.5s ease-in-out';
    }, 100);
});

const handleLogin = () => {
    if (!username.value || !password.value) {
        message.error('请输入用户名和密码');
        return;
    }
    loading.value = true;
    // 调用真实登录接口
    login(username.value, password.value, rememberMe.value)
      .then((res) => {
        loading.value = false;
        message.success('登录成功');
        console.log(res);
        localStorage.setItem('token', res.token);
        localStorage.setItem('userInfo', JSON.stringify(res.user));
        if(res.user.lastLogin === null){
            
        }
        router.push('/');
        if (rememberMe.value) {
          console.log('记住密码已启用');
        }
      })
      .catch((err) => {
        loading.value = false;
        message.error(err.message || '登录失败');
      });
};
</script>
<style scoped>
/* 背景动画 */
.bg-gradient-animation {
    background: linear-gradient(45deg, #f3f4f6, #e5e7eb, #f3f4f6);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.floating-particles::before,
.floating-particles::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at center, #3b82f6 1px, transparent 1px);
    background-size: 50px 50px;
    animation: particleFloat 20s linear infinite;
    opacity: 0.3;
}

.floating-particles::after {
    background-size: 30px 30px;
    animation-duration: 15s;
    animation-delay: -5s;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0);
    }

    25% {
        transform: translateY(-20px) translateX(10px);
    }

    50% {
        transform: translateY(-40px) translateX(0);
    }

    75% {
        transform: translateY(-20px) translateX(-10px);
    }

    100% {
        transform: translateY(0) translateX(0);
    }
}

/* 输入框聚焦动画 */
:deep(.ant-input-affix-wrapper),
:deep(.ant-input) {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

:deep(.ant-input-affix-wrapper:focus-within) {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
}

/* 按钮动画 */
button[type="submit"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

button[type="submit"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease-out, height 0.6s ease-out;
}

button[type="submit"]:hover::before {
    width: 300px;
    height: 300px;
}

/* 自定义输入框样式 */
:deep(.ant-input) {
    height: 44px;
    font-size: 14px;
}

:deep(.ant-input-affix-wrapper) {
    padding: 0 11px;
    height: 44px;
    font-size: 14px;
    border-color: #d1d5db;
    position: relative;
}

:deep(.ant-input-affix-wrapper:focus),
:deep(.ant-input-affix-wrapper-focused) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

:deep(.ant-input-affix-wrapper:focus)::before,
:deep(.ant-input-affix-wrapper-focused)::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    filter: blur(3px);
    animation: borderAnimation 2s linear infinite;
    z-index: 1;
}

@keyframes borderAnimation {
    0% {
        top: -5px;
        left: -5px;
    }

    25% {
        top: -5px;
        left: calc(100% - 5px);
    }

    50% {
        top: calc(100% - 5px);
        left: calc(100% - 5px);
    }

    75% {
        top: calc(100% - 5px);
        left: -5px;
    }

    100% {
        top: -5px;
        left: -5px;
    }
}

:deep(.ant-input-affix-wrapper:hover) {
    border-color: #3b82f6;
}

:deep(.ant-checkbox-checked .ant-checkbox-inner) {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

:deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner),
:deep(.ant-checkbox:hover .ant-checkbox-inner),
:deep(.ant-checkbox-input:focus + .ant-checkbox-inner) {
    border-color: #3b82f6;
}

/* 输入框动画效果 */
:deep(.ant-input-affix-wrapper),
:deep(.ant-input) {
    transition: all 0.3s ease;
}

/* 自定义复选框动画 */
:deep(.ant-checkbox-checked .ant-checkbox-inner::after) {
    transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
</style>